<template>
	<view class="info-container">
		<view class="order-status" @tap="showActionSheet"> 修改订单状态 > </view>
		<view class="order-info">
			<view class="title">商品列表</view>
			
			<view class="orderGoods-list" v-for="(item,index) of dataInfo.orderDetailInfoList" :key="index">
				<view class="goods-image">
					<image :src="item.imgPath" :mode="'aspectFit'"></image>
				</view>
				<view class="explain">
					<view class="goods-name">{{ item.goodsName }}</view>
					<view class="shop-num">x<text>{{ item.number }}</text></view>
				</view>
				<view class="status">{{setStatus(item.status)}}</view>
				<view class="price">￥{{item.amount}}</view>
			</view>
			
			
			<view class="amount">
				<text>数量：{{ getGoodsLength }}</text>
				<text>合计：￥{{dataInfo.amount}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				dataInfo: {},
			};
		},
		onLoad: function(options){
			this.orderId = options.orderId;
			this.getData();
		},
		computed:{
			getGoodsLength(){
				if(this.dataInfo.orderDetailInfoList){
					return this.dataInfo.orderDetailInfoList.length;
				}else{
					return null;
				}
			}
		},
		methods: {
			// 获取数据
			getData(){
				console.log('我出来l1');
				const _this = this;
				this.dataInfo = {};
				
				uni.$http({
					url: `/order/goodsorderdetail/getOrderDetails/${_this.orderId}`,
					method:"GET",
				}).then((res) => {
					const _data = res[1].data;
					
					if(_data.msg == 'success'){
						_this.dataInfo = _data.data;
						console.log(_this.dataInfo);
					}else{
						uni.showToast({
							title: '数据获取失败',
							icon: 'none'
						});
					}
					
				})
			},
			// 计算 状态
			setStatus: function(str){
				if(str == '0'){
					return '未分拣'
				}else if(str == '1'){
					return '正在分拣'
				}else if(str == '2'){
					return '放入传送带'
				}else if(str == '3'){
					return '总台接受'
				}
			},
			// 打开底部弹窗
			showActionSheet(){
				const _this = this;
				uni.showActionSheet({
					itemList: ['未分拣','分区分拣中','吧台打包','打包完成'],
					success:function(res){
						
						console.log(_this.dataInfo.orderId);
						uni.$http({
							url: `/order/ordertab/update/status/${_this.dataInfo.orderId}?status=${res.tapIndex}`,
							method: 'POST'
						}).then((res) => {
							
						const _data = res[1].data;
						
						if(_data.msg == 'success'){
							uni.showToast({
								title: '修改成功',
								icon:'none'
							})
							_this.getData();
						}
						
						})
					},
					fail: function(res){
						console.log('打印失败');
					}
				})
			}
		},
		onHide(){
			const eventChannel = this.getOpenerEventChannel();
			 eventChannel.emit('refreshData');
			 console.log('我要吟唱了');
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}

view{
	box-sizing: border-box;
}

.info-container{
	padding-top: 100rpx;

	.order-status{
		position: fixed;
		top: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		line-height: 100rpx;
		font-size: 40rpx;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	.order-info{
		display: flex;
		flex-direction: column;
		margin: 20rpx;
		background-color: #fff;
		width: 710rpx;
		border-radius: 5rpx;
		overflow: hidden;
		
		.title{
			height: 60rpx;
			line-height: 60rpx;
			font-family: Arial, Helvetica, sans-serif;
			text-align: center;
			font-size: 22rpx;
			border-bottom: 4rpx solid #f6f6f6;
		}
		
		.orderGoods-list{
			display: flex;
			padding: 20rpx;
			
			.goods-image{
				width: 125rpx;
				height: 125rpx;
				padding: 10rpx;
				
				image{
					height: 104rpx;
					width: 104rpx;
				}
			}
			
			.explain{
				display: flex;
				flex-direction: column;
				width: 300rpx;
				height: 125rpx;
				padding: 0 30rpx;
				
				.goods-name{
					height: 75rpx;
					line-height: 75rpx;
					color: #000;
				}
				
				.shop-num{
					height: 50rpx;
					line-height: 50rpx;
					font-size: 25rpx;
					color: #848484;
				}
			
			}
			
			.status{
				width: 120rpx;
				height: 125rpx;
				line-height: 125rpx;
				text-align: center;
				font-size: 25rpx;
				color: blue;
			}
			
			.price{
				width: 125rpx;
				height: 125rpx;
				line-height: 125rpx;
				text-align: center;
				font-family: Arial, Helvetica, sans-serif;
			}
			
		}
		
		.amount{
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
			margin-top: 20rpx;
			border-top: 3rpx solid #f6f6f6;
			
			text{
				display: inline-block;
				margin-right: 30rpx;
			}
		}
		
	}
	
}

</style>
